<template>
    <div class="dict-type-page">
        <el-card class="search-box">
            <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item label="字典名称">
                    <el-input v-model="searchForm.dictName" placeholder="请填写字典名称"  clearable></el-input>
                </el-form-item>
                    <el-form-item label="字典标识">
                    <el-input v-model="searchForm.dictKey" placeholder="请填写字典标识"  clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" plain>查询</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card class="table-box">
            <div class="table-tool" style="display: flex;margin-bottom: 15px;">
                <el-button type="primary" plain @click="handleAdd" v-permits="['system:dict_type:add']">添加</el-button>
                <el-button type="success" plain @click="handleEdit" v-permits="['system:dict_type:edit']">修改</el-button>
                <el-button type="danger" plain @click="handleDelete" v-permits="['system:dict_type:delete']">删除</el-button>
            </div>
            <div class="table-list">
                <el-table :data="tableData" stripe border :highlight-current-row="true" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column prop="dictName" label="字典名称" align="center"></el-table-column>
                    <el-table-column prop="dictKey" label="字典标识" align="center">
                        <template #default="scope">
                            <el-link type="primary" @click="toDictDataPath(scope.row.id)">{{ scope.row.dictKey }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
                    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                    <el-table-column prop="operate" label="操作" align="center">
                        <template #default="scope">
                            <el-button type="primary" plain size="small"
                                v-permits="['system:dict_type:edit']"
                                @click="() => handleEdit(scope.row.id)">修改</el-button>
                            <el-button type="danger" plain size="small"
                                v-permits="['system:dict_type:delete']"
                                @click="() => handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="table-pagination">
                <el-pagination v-model:current-page="searchForm.pageNum" v-model:page-size="searchForm.pageSize"
                    :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
                    :page-count="pageCount" :total="total" @change="onSearch" />
            </div>
        </el-card>
        <UnifiedForm ref="UnifiedFormRef" v-model:dialogFrom="dialogFrom" @onParentSearch="onSearch"></UnifiedForm>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------

import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import UnifiedForm, { type DialogFrom } from '@/views/system/SysDictType/components/UnifiedForm.vue';
import type { SearchListParams, TableData } from '@/api/system/SysDictType';
import { getPage, deleteInfo } from '@/api/system/SysDictType';
import router from '@/router';

// ---------------------------------------------------相关参数定义---------------------------------------------------
const searchForm = reactive<SearchListParams>({
    pageNum: 1,
    pageSize: 10,
            dictName: '',
            dictKey: '',
})

const tableData = ref<TableData[]>([])
const pageCount = ref(0)
const total = ref(0)

const selectionTableData = ref<number[]>([])
const dialogFrom = ref<DialogFrom>({
    dialogTitle: '添加数据',
    dialogVisible: false,
    infoId: null
})
// ---------------------------------------------------事件定义---------------------------------------------------
/**
 * 页面加载时回调
 */
onMounted(() => {
    onSearch();
})
// ---------------------------------------------------操作方法定义---------------------------------------------------

/**
 * 查询
 */
const onSearch = () => {
    getPage(searchForm).then((res) => {
        if (res.data.code === 200) {
            tableData.value = res.data.data.records;
            pageCount.value = res.data.data.pages;
            total.value = res.data.data.total;
        }
    });
}

/**
 * 跳转到字典数据页面
 * @param id id
 */
const toDictDataPath = (id: number) => {
    router.push({
        path: '/system/dict/data',
        query: {
            dictTypeId: id
        }
    })
}

/**
 * 添加
 */
const handleAdd = () => {
    dialogFrom.value.dialogTitle = '添加数据';
    dialogFrom.value.dialogVisible = true;
    dialogFrom.value.infoId = null;
}

/**
 * 修改
 * @param rowId id
 */
const handleEdit = (rowId: number) => {
    if (typeof rowId !== 'number') {
        if (selectionTableData.value.length == 0) {
            ElMessage.warning('请选择一条数据');
            return;
        } else if (selectionTableData.value.length > 1) {
            ElMessage.warning('只能选择一条数据');
            return;
        }
        rowId = selectionTableData.value[0];
    }
    dialogFrom.value.dialogTitle = '修改数据';
    dialogFrom.value.dialogVisible = true;
    dialogFrom.value.infoId = rowId;
}

/**
 * 删除
 * @param rowId id
 */
const handleDelete = (rowId: number | number[]) => {
    if (typeof rowId !== 'number') {
        if (selectionTableData.value.length == 0) {
            ElMessage.warning('请选择一条数据');
            return;
        }
        rowId = selectionTableData.value;
    }
    deleteApi(rowId)
}

/**
 * 删除接口调用
 * @param id id
 */
const deleteApi = (rowId: number | number[]) => {
    ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteInfo(rowId).then((res) => {
            if (res.data.code === 200) {
                ElMessage.success('删除成功');
                onSearch();
            }
        })
    }).catch(() => { })
}

/**
 * 多选
 * @param val 选中的数据
 */
const handleSelectionChange = (val: TableData[]) => {
    selectionTableData.value = val.map((item) => {
        return item.id;
    });
}
</script>

<style lang="scss" scoped>
.dict-type-page {
    width: 100%;
    height: 100%;
}
</style>